<script setup>
import { defineProps } from 'vue'
defineProps({
  good: {
    type: Object
  }
})
</script>
<template>
  <div>
    <h2>
      <slot name="title"></slot>
    </h2>
    <ul>
      <li v-for="ele in good" :key="ele.id">
        <img v-img-lazy="ele.picture" alt="" style="width: 150px" />
        <p>{{ ele.name }}</p>
        <p style="color: red">￥ {{ ele.price }}</p>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
div {
  width: 200px;
  background-color: #d3f5cd;
  h2 {
    margin: 0;
    padding-left: 10px;
    color: white;
    line-height: 50px;
    background-color: $xtxColor;
  }
  ul {
    border-radius: 1px solid $xtxColor;
    li {
      margin: 10px 0;
      text-align: center;
    }
  }
}
</style>
